<!doctype html> <!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
	<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<!-- DNS prefetch -->
		<link rel=dns-prefetch href="//fonts.googleapis.com">
		<!-- Use the .htaccess and remove these lines to avoid edge case issues.
		More info: h5bp.com/b/378 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<title>Wizard :: Peach &ndash; Clean &amp; Smooth Admin Template</title>
		<meta name="description" content="">
		<meta name="author" content="">
		
		<!-- Mobile viewport optimized: j.mp/bplateviewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		
		<!-- Place favicon.ico and apple-touch-icon.png in the root directory:
		mathiasbynens.be/notes/touch-icons -->
		
		<!-- CSS -->
		<link rel="stylesheet" href="css/960gs/fluid.css"> <!-- 960.gs Grid System -->
		<!-- The HTML5-Boilerplate CSS styling -->
		<link rel="stylesheet" href="css/h5bp/normalize.css"> <!-- RECOMMENDED: H5BP reset styles -->
		<link rel="stylesheet" href="css/h5bp/non-semantic.helper.classes.css"> <!-- RECOMMENDED: H5BP helpers (e.g. .clear or .hidden) -->
		<link rel="stylesheet" href="css/h5bp/print.styles.css"> <!-- OPTIONAL: H5BP print styles -->
		<!-- The main styling -->
		<link rel="stylesheet" href="css/sprites.css"> <!-- STRONGLY RECOMMENDED: Basic sprites (e.g. buttons, jGrowl) -->
		<link rel="stylesheet" href="css/header.css"> <!-- REQUIRED: Header styling -->
		<link rel="stylesheet" href="css/navigation.css"> <!-- REQUIRED: Navigation styling -->
		<link rel="stylesheet" href="css/content.css"> <!-- REQUIRED: Content styling -->
		<link rel="stylesheet" href="css/footer.css"> <!-- REQUIRED: Footer styling -->
		<link rel="stylesheet" href="css/typographics.css"> <!-- REQUIRED: Typographics -->
		<link rel="stylesheet" href="css/ie.fixes.css"> <!-- OPTIONAL: Fixes for IE7 -->
		<!-- Sprites styling -->
		<link rel="stylesheet" href="css/sprite.wizard.css"> <!-- SPRITE: Wizard -->
		
		<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
		
		<!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
		Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5
		elements & feature detects;
		for optimal performance, create your own custom Modernizr build:
		www.modernizr.com/download/ -->
		<script src="js/libs/modernizr-2.0.6.min.js"></script>
	</head>
	
	<body>
		
		<!-- Begin of #height-wrapper -->
		<div id="height-wrapper">
			<!-- Begin of header -->
			<header>
				<!-- Begin of the header toolbar -->
				<div id="header_toolbar">
					<div class="container_12">
						<h1 class="grid_8">Peach &ndash; Clean &amp; Smooth Admin Template</h1>
						<!-- Start of right part -->
						<div class="grid_4">
							<!-- A small toolbar button -->
							<div class="toolbar_small">
								<div class="toolbutton">
									<span>3</span>
									<img src="img/icons/16x16/mail.png" width="16" height="16" alt="mail" >
								</div>
								<div class="toolbox" >
									<span class="arrow"></span>
									<h3>Your Messages</h3>
									<ul class="mail">
										<li>
											<a href="#"> <strong>10:15</strong>Need your Help!
											<small>
												From: John
											</small> </a>
										</li>
										<li>
											<a href="#"> <strong>9:55</strong>New comment on you theme
											<small>
												From: themeforest
											</small></a>
										</li>
										<li>
											<a href="#"> <strong>Yest.</strong>Successfull backup
											<small>
												From: System
											</small></a>
										</li>
										<li class="read">
											<a href="#"> <strong>2 days</strong>Bug report
											<small>
												From: Jane
											</small></a>
										</li>
									</ul>
									<a class="inbox" href="#">Go to inbox &raquo;</a>
								</div>
							</div> <!-- End of small toolbar button -->
							
							<!-- A large toolbar button -->
							<div class="toolbar_large">
								<div class="toolbutton">
									<div class="toolicon">
										<img src="img/icons/16x16/user.png" width="16" height="16" alt="user" >
									</div>
									<div class="toolmenu">
										<div class="toolcaption">
											<span>Administrator</span>
										</div>
										<!-- Start of menu -->
										<div class="dropdown">
											<ul>
												<li>
													<a href="#">Settings</a>
												</li>
												<li>
													<a href="#">Logout</a>
												</li>
											</ul>
										</div> <!-- End of menu -->
									</div>
								</div>
							</div> <!-- End of large toolbar button -->
						</div>
						<!-- End of right part -->
					</div>
				</div>
				<!-- End of the header toolbar -->
				
				<!-- Start of the main header bar -->
				<nav id="header_main">
					<div class="container_12">
						<!-- Start of the main navigation -->
						<ul id="nav_main">
							<li>
								<a href="#">
								<img src="img/icons/25x25/dark/computer-imac.png" width=25 height=25 alt="">
								Dashboard</a>
								<ul>
									<li>
										<a href="dashboard.html">Dashboard</a>
									</li>
									<li>
										<a href="404.html">404</a>
									</li>
									<li>
										<a href="login.html">Login</a>
									</li>
								</ul>
							</li>
							<li class="current">
								<a href="#">
								<img src="img/icons/25x25/dark/blocks---images.png" width=25 height=25 alt="">
								Elements</a>
								<ul>
									<li>
										<a href="forms.html">Forms</a>
									</li>
									<li>
										<a href="gallery.html">Gallery</a>
									</li>
									<li>
										<a href="lists.html">Lists</a>
									</li>
									<li>
										<a href="tables.html">Tables</a>
									</li>
									<li>
										<a href="tabs.html">Tabs</a>
									</li>
									<li class="last-child current">
										<a href="wizard.html">Wizard</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">
								<img src="img/icons/25x25/dark/user-comment.png" width=25 height=25 alt="">
								User Information</a>
								<ul>
									<li>
										<a href="alert_boxes.html">Alert Boxes</a>
									</li>
									<li>
										<a href="messages.html">Messages (Fallr)</a>
									</li>
									<li>
										<a href="notifications.html">Notifications</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">
								<img src="img/icons/25x25/dark/robot.png" width=25 height=25 alt="">
								Plugins</a>
								<ul>
									<li>
										<a href="charts.html">Charts</a>
									</li>
									<li>
										<a href="calendar.html">Calendar</a>
									</li>
									<li>
										<a href="explorer.html">Explorer</a>
									</li>
									<li>
										<a href="editor.html">Rich Text Editor</a>
									</li>
									<li>
										<a href="tooltips.html">Tooltips</a>
									</li>
								</ul>
							</li>
						</ul>
						<!-- End of the main navigation -->
					</div>
				</nav>
				<div id="nav_sub"></div>
			</header>
			
			<!-- Start of the content -->
			<div role="main" class="container_12" id="content-wrapper">
				
				<!-- Start of the main content -->
				<div id="main_content">
				
					<h2 class="grid_12">Wizard</h2>
					<div class="clean"></div>
					
					<div class="grid_12">
						<div class="box wizard" data-step="1">
							<div class="header">
								<img src="img/icons/packs/fugue/16x16/application--arrow.png" alt="" width="16"
								height="16">
								<h3>Wizard</h3>
								<span></span>
							</div>
							<div class="content">
								<div class="steps">
									<ul>
										<li class="current">
											<a href="#step_1"> <span>1</span>
											<div>
												<strong>Register</strong>
												<small>
													It only takes a minute
												</small>
											</div> </a>
										</li>
										<li>
											<a href="#step_2"> <span>2</span>
											<div>
												<strong>Information</strong>
												<small>
													Fill out our form
												</small>
											</div></a>
										</li>
										<li>
											<a href="#step_3"> <span>3</span>
											<div>
												<strong>Another Step</strong>
												<small>
													Were nearly there
												</small>
											</div></a>
										</li>
										<li>
											<a href="#step_4"> <span>4</span>
											<div>
												<strong>Finish</strong>
												<small>
													Confirm and complete
												</small>
											</div></a>
										</li>
									</ul>
								</div>
								<div class="wiz_page step_1">
									<div class="wiz_sidebar grid_3">
										<span>1</span>
										<div>
											<strong>Lorem</strong>
											<small>
												Ipsum
											</small>
										</div>
										<p>
											Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.
										</p>
									</div>
									<div class="wiz_content grid_9">
										<h3>Database setup</h3>
										<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
										<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
										<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
										<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
									</div>
								</div>
								<div class="wiz_page step_2">
									<div class="wiz_sidebar grid_3">
										<span>2</span>
										<div>
											<strong>Lorem</strong>
											<small>
												Ipsum
											</small>
										</div>
										<p>
											Something else
										</p>
									</div>
									<div class="wiz_content grid_9">
										<h3>Database setup</h3>
										<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
										<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
										<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
										<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
									</div>
								</div>
								<div class="wiz_page step_3">
									<div class="wiz_sidebar grid_3">
										<span>3</span>
										<div>
											<strong>Lorem</strong>
											<small>
												Ipsum
											</small>
										</div>
										<p>
											Something else, but longer (maybe...)
										</p>
									</div>
									<div class="wiz_content grid_9">
										<h3>Your setup</h3>
										<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
										<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
										<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
										<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
									</div>
								</div>
								<div class="wiz_page step_4">
									<div class="wiz_sidebar grid_3">
										<span>4</span>
										<div>
											<strong>Lorem</strong>
											<small>
												Ipsum
											</small>
										</div>
										<p>
											Something else, but muuuuch longer (longer, longer, longer, longer)
										</p>
									</div>
									<div class="wiz_content grid_9">
										<h3>Finished</h3>
										<div class="alert success"><span class="icon"></span>You're ready!</div>
										<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
										<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
										<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
										<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
									</div>
								</div>
							</div>
							<div class="actions">
								<div class="actions-left">
									<button class="prev">
										&laquo; Back
									</button>
								</div>
								<div class="actions-right">
									<button class="next">
										Forward &raquo;
									</button>
								</div>
							</div> <!-- End of .content -->
							<div class="clear"></div>
						</div> <!-- End of .box -->
					</div> <!-- End of .grid_12 -->
					
				</div> <!-- End of #main_content -->
				<div class="clear"></div>
				
			</div> <!-- End of #content-wrapper -->
			<div class="clear"></div>
			
		</div> <!-- End of #height-wrapper -->
		
		<!-- Start of footer-->
		<footer>
			<div class="container_12">
				Copyright &copy; 2011 YourCompany, all rights reserved.
				<div id="button_bar">
					<ul>
						<li>
							<span><a href="dashboard.html">Dashboard</a></span>
						</li>
						<li>
							<span><a href="#">Settings</a></span>
						</li>
					</ul>
				</div>
			</div>
		</footer><!-- End of footer-->
		
		
		<!-- JavaScript at the bottom for fast page loading -->
		<!-- Grab Google CDN's jQuery + jQueryUI, with a protocol relative URL; fall back to local -->

		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.4.js"><\/script>')</script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
		<script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui-1.8.16.min.js"><\/script>')</script>
		
		<!-- scripts concatenated and minified via build script -->
		<script defer src="js/plugins.js"></script> <!-- REQUIRED: Different own jQuery plugnis -->
		<script defer src="js/mylibs/jquery.ba-resize.js"></script> <!-- RECOMMENDED when using sidebar: page resizing -->
		<script defer src="js/mylibs/jquery.easing.1.3.js"></script> <!-- RECOMMENDED: box animations -->
		<script defer src="js/mylibs/jquery.ui.touch-punch.js"></script> <!-- RECOMMENDED: touch compatibility -->
		<script defer src="js/mylibs/jquery.equalheights.js"></script>
		<script defer src="js/script.js"></script> <!-- REQUIRED: Generic scripts -->
		<!-- end scripts -->
		
		<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to
		support IE 6.
		chromium.org/developers/how-tos/chrome-frame-getting-started -->
		<!--[if lt IE 7 ]>
		<script defer
		src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
		<script
		defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
		<![endif]-->
	</body>
</html>
